html {
	color: #333;
}

a,
button,
input,
div {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
	background: none;
	border: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
	margin: 0;
	padding: 0
}

body,
button,
input,
select,
textarea {
	font: 400 16px tahoma, arial, '微软雅黑';
	color: #666
}

body,
button,
input,
select,
textarea {
	-webkit-text-size-adjust: none;
	font: 400 16px "Microsoft Yahei", 微软雅黑, "Helvetica Neue", Arial, sans-serif;
	outline: 0;
	color: #333
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: 400
}

address,
cite,
dfn,
em,
var,
caption,
strong,
th,
i,
code,
kbd,
pre,
samp {
	font-style: normal;
	font-weight: 400
}

ul,
ol {
	list-style: none
}

input,
button,
textarea,
fieldset,
img {
	border: 0 none;
	width: 100%;
}

button,
input,
select,
textarea {
	font-size: 100%;
	vertical-align: middle;
	font-family: inherit
}

textarea {
	overflow: auto;
	vertical-align: top
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

th {
	text-align: inherit
}

caption,
th {
	text-align: center
}

a {
	text-decoration: none;
	color: #666;
}

a {
	text-decoration: none;
	display: block;
	color: #666;
	white-space: normal;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: ''
}

.clearfix:after {
	clear: both
}

.clearfix {
	content: "";
	*zoom: 1
}

q:before,
q:after {
	content: ""
}

.clear {
	clear: both
}

iframe {
	display: block
}

abbr,
acronym {
	border: 0 none;
	font-variant: normal
}

del {
	text-decoration: line-through
}

.fl {
	float: left
}

.fr {
	float: right
}

.fc {
	clear: both
}

.fz {
	zoom: 1
}

img {
	border: none 0
}

input {
	_border: none;
	outline: none
}


/*媒体查询*/

@media (min-width:721px) {
	html {
		font-size: 937.5%;
	}
}

@media (min-width:541px) and (max-width:720px) {
	html {
		font-size: 1400%;
	}
}

@media (min-width:481px) and (max-width:540px) {
	html {
		font-size: 1054%;
	}
}

@media (min-width:361px) and (max-width:480px) {
	html {
		font-size: 938%;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 3) and (max-width:414px) {
	html {
		font-size: 808%;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width:375px) {
	html {
		font-size: 732%;
	}
}

@media (min-width:321px) and (max-width:360px) {
	html {
		font-size: 625%;
	}
}

@media (max-width:320px) {
	html {
		font-size: 625%;
	}
}

*:not(input, textarea) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

html,
body {
	-webkit-user-select: none
}

#pageSwaper {
	position: relative;
	overflow: hidden;
}

.popup-maskEdit {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	max-width: 80%;
	padding: 0.06rem 0.16rem;
	line-height: 0.24rem;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, .85);
	font-size: 0.12rem;
	color: #fff;
	border-radius: 0.06rem;
	white-space: nowrap;
}


/*底部导航栏*/

.user_footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	padding: 0;
	width: 100%;
	height: 0.55rem;
	line-height: 0.55rem;
	box-sizing: border-box;
	margin: 0 auto;
	transform-origin: 0px 0px 0px;
	transform: translate(0px, 0px) translateZ(0px);
	box-shadow: #666666 0px 0px 10px;
	-webkit-transform-origin: 0px 0px 0px;
	-webkit-transform: translate(0px, 0px) translateZ(0px);
	-webkit-box-shadow: #666666 0px 0px 10px;
}

.user_footer>ul {
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	z-index: 99;
	background-color: #ffffff;
}

.user_footer>ul>li {
	-webkit-box-flex: 1;
	-o-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	text-align: center;
	color: #333;
	font-size: .089rem;
}

.user_footer>ul>li>a>i {
	text-indent: -99999px;
	display: inline-block;
}

.user_footer>ul>li>a>p {
	font-size: 0.15rem;
	margin-top: -0.18rem;
	display: block;
	line-height: 0.2rem;
	color: #333333;
}

.user_footer>ul>li:nth-child(1)>a>i {
	width: 0.2rem;
	height: 0.2rem;
	background: url(../images/home_icon_1.png) no-repeat 0 0;
	background-size: 100% auto;
}

.user_footer>ul>li:nth-child(1)>a.active>i {
	background: url(../images/home_icon_1_active.png) no-repeat 0 0;
	background-size: 100% auto;
}

.user_footer>ul>li:nth-child(1)>a.active>p {
	color: #0071ce;
}

.user_footer>ul>li:nth-child(2)>a>i {
	width: 0.2rem;
	height: 0.2rem;
	background: url(../images/home_icon_2.png) no-repeat 0 0;
	background-size: 100% auto;
}

.user_footer>ul>li:nth-child(2)>a.active>i {
	background: url(../images/home_icon_2_active.png) no-repeat 0 0;
	background-size: 100% auto;
}

.user_footer>ul>li:nth-child(2)>a.active>p {
	color: #0071ce;
}

.user_footer .user_bottom {
	width: 0.65rem;
	height: 0.65rem;
	position: absolute;
	bottom: 0.1rem;
	left: 50%;
	-webkit-transform: translate(-50%);
	-moz-transform: translate(-50%);
	-o-transform: translate(-50%);
	transform: translate(-50%);
	background-color: #ffffff;
	border-radius: 100%;
	box-shadow: #666666 0px 0px 10px;
	-webkit-transform-origin: 0px 0px 0px;
	-webkit-box-shadow: #666666 0px 0px 10px;
	z-index: 98;
}

.user_footer .user_add {
	width: 0.59rem;
	height: 0.59rem;
	position: absolute;
	bottom: 0.1rem;
	left: 50%;
	-webkit-transform: translate(-50%);
	-moz-transform: translate(-50%);
	-o-transform: translate(-50%);
	transform: translate(-50%);
	background-color: #c0c0c0;
	border-radius: 100%;
	z-index: 100;
	background: url(../images/search-plus.png) no-repeat center;
	background-size: 100% auto;
}
.user_footer .user_add.active {
	-webkit-animation: translateZ 0.2s linear both;
	animation: translateZ 0.2s linear both;
}
.expense_bg>ul>li{
	width: 0.59rem;
	height: 0.59rem;
	position: absolute;
	bottom: 0.1rem;
	left: 50%;
	-webkit-transform: translate(-50%);
	-moz-transform: translate(-50%);
	-o-transform: translate(-50%);
	transform: translate(-50%);
	background: url(../images/search-plus.png) no-repeat center;
	background-size: 100% auto;
	opacity: 0;
}
.expense_bg>ul>li:first-child{
	background: url(../images/payment.png) no-repeat center;
	background-size: 100% auto;
}
.expense_bg>ul>li:last-child{
	background: url(../images/chain.png) no-repeat center;
	background-size: 100% auto;
}
.expense_bg>ul .home_icon1.active{
	-webkit-animation: bounceInDown1 0.5s linear both;
    animation: bounceInDown1 0.5s linear both;
}
.expense_bg>ul .home_icon2.active{
	-webkit-animation: bounceInDown2 0.5s linear both;
    animation: bounceInDown2 0.5s linear both;
}


//动效
@-webkit-keyframes translateZ {
	0% {
		-webkit-transform: translate(-50%, 0) rotateZ(0deg);
	}
	100% {
		-webkit-transform: translate(-50%, 0) rotateZ(145deg);
	}
}

@keyframes translateZ {
	0% {
		-webkit-transform: translate(-50%, 0) rotateZ(0deg);
	}
	100% {
		-webkit-transform: translate(-50%, 0) rotateZ(145deg);
	}
}

.translateZ {
	-webkit-animation-name: translateZ;
	animation-name: translateZ;
}
//音符
@-webkit-keyframes bounceInDown1 {
    0%{
        -webkit-transform:translate(-50%, 0) rotateZ(0deg);
        opacity: 0;
    }
    
    100%{
        -webkit-transform:translate(-150%,-150%) rotateZ(360deg);
        opacity: 1;
    }
}

@keyframes bounceInDown1 {
    0%{
        -webkit-transform:translate(-50%, 0) rotateZ(0deg);
        opacity: 0;
    }
    
    100%{
       -webkit-transform:translate(-150%,-150%) rotateZ(360deg);
        opacity: 1;
    }
}
.bounceInDown1 {
	-webkit-animation-name: bounceInDown1;
	animation-name: bounceInDown1;
}
@-webkit-keyframes bounceInDown2 {
    0%{
        -webkit-transform:translate(-50%, 0) rotateZ(0deg);
        opacity: 0;
    }
    
    100%{
        -webkit-transform:translate(50%,-150%) rotateZ(360deg);
        opacity: 1;
    }
}

@keyframes bounceInDown2 {
    0%{
        -webkit-transform:translate(-50%, 0) rotateZ(0deg);
        opacity: 0;
    }
    
    100%{
        -webkit-transform:translate(50%,-150%) rotateZ(360deg);
        opacity: 1;
    }
}
.bounceInDown2 {
	-webkit-animation-name: bounceInDown2;
	animation-name: bounceInDown2;
}

/*旋转页面*/

.expense_bg {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	overflow: auto;
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
}
/*时间动画*/
#zzsc{
	width:100%;
	margin:40px auto;
}